<template>
	<div ref="myElement">
		<div id="player-container" :style="`width:${playth}px ;height:${playwh}px;`">
			<!-- <div class="watermark"></div> -->
		</div>
	</div>
</template>
<script>
	import { ref, onMounted, watch } from 'vue'
	export default {
		name: 'MyVideoPlayer',
		props: ['medium'],

		data() {
			return {
				player: null,
				jianting: '',
				playwh: 0,
				playth: 0,
			}
		},

		methods: {
			initializePlayer() {
				if (this.player) {
					// 销毁旧播放器实例
					this.player.dispose()
				}
				const newElement = document.createElement('div')
				newElement.classList.add('watermark')
				const container = this.$refs.myElement.querySelector('#player-container')
				container.appendChild(newElement)
				this.videoWidth
				this.videoHeight
				if (this.medium) {
					this.player = new window.Aliplayer({
						id: 'player-container',
						source: this.medium,
						autoplay: true,
						width: `${this.videoWidth}px`,
						height: `${this.videoHeight}px`,
						isLive: false,
						autoPlayDelay: 3,
						autoPlayDelayDisplayText: '请等待...',
					})

					this.player.on('ended', () => {
						// 在这里可以执行你想要的操作，比如播放下一个视频
						console.log('视频播放完毕')
						this.$emit('custom-ended', true)
					})
				}
			},
			// 播放完毕  应该播放另一个 从列表里面获取另一个
		},
		mounted() {
			const link = document.createElement('link')
			link.href = 'https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css'
			link.rel = 'stylesheet'
			document.head.appendChild(link)

			const script = document.createElement('script')
			script.src = 'https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js'
			script.charset = 'utf-8'
			script.type = 'text/javascript'
			document.body.appendChild(script)
			script.onload = () => {
				this.initializePlayer()
			}
		},
		computed: {
			videoHeight() {
				const element = this.$refs.myElement
				const width = element.offsetWidth
				const videoAspectRatio = 16 / 9 // 假设视频宽高比例是 16:9
				this.playwh = width / videoAspectRatio
				return width / videoAspectRatio
			},
			videoWidth() {
				const element = this.$refs.myElement
				this.playth = element.offsetWidth
				return element.offsetWidth
			},
		},
		watch: {
			medium(newMedium) {
				// 在 medium 属性发生变化时重新初始化播放器
				this.initializePlayer(newMedium)
			},
		},
	}
</script>
<style>
	#player-container {
		position: relative;
		background: #000;
	}

	.watermark {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 100px;
		height: 50px;
		opacity: 0.7;
		/* 设置水印图片的背景 */
		background: url('./../assets/logo.svg'); /* 替换成水印图片的路径 */
		/* 这里可以继续添加其他样式，比如文字水印等 */
	}
	.prism-big-play-btn {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}
	@media screen and (max-width: 860px) {
		.prism-big-play-btn,
		.outter {
			width: 0.3rem !important;
			height: 0.3rem !important;
		}
		.watermark {
			position: absolute;
			top: 0.05rem;
			right: 0.05rem;
			width: 0.7rem;
			height: 0.35rem;
			background: url('./../assets/logo.svg') center/contain no-repeat; /* 替换成水印图片的路径 */
		}
	}
</style>
